<template>
  <div class="ppt">
    <van-nav-bar title="ppt" left-arrow @click-left="ftop">
      <template #right>
        <van-icon name="search" size="18" @click="search" />
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in 5" :key="item">{{
            item
          }}</van-swipe-item>
        </van-swipe>
      </div>
      <div class="course">
        <div class="Good courses">
          <p class="BigHeade">精选好课</p>
          <van-grid :border="false" :column-num="2">
            <van-grid-item>
              <van-image
                src="https://img.xiaopiu.com/userImages/img41215f0e429f00.jpg"
              />
              <p class="headeline">哈哈哈哈哈哈哈哈</p>
              <p class="evaluate">
                <van-rate
                  v-model="value"
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                />
                <span>{{ value }}</span>
                <span>7711学过</span>
              </p>
              <p class="price">￥99.00</p>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://img.xiaopiu.com/userImages/img41215f0e429f00.jpg"
              />
              <p class="headeline">哈哈哈哈哈哈哈哈</p>
              <p class="evaluate">
                <van-rate
                  v-model="value"
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                />
                <span>{{ value }}</span>
                <span>7711学过</span>
              </p>
              <p class="price">￥99.00</p>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://img.xiaopiu.com/userImages/img41215f0e429f00.jpg"
              />
              <p class="headeline">哈哈哈哈哈哈哈哈</p>
              <p class="evaluate">
                <van-rate
                  v-model="value"
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                />
                <span>{{ value }}</span>
                <span>7711学过</span>
              </p>
              <p class="price">￥99.00</p>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://img.xiaopiu.com/userImages/img41215f0e429f00.jpg"
              />
              <p class="headeline">哈哈哈哈哈哈哈哈</p>
              <p class="evaluate">
                <van-rate
                  v-model="value"
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                />
                <span>{{ value }}</span>
                <span>7711学过</span>
              </p>
              <p class="price">￥99.00</p>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="free courses">
          <p class="BigHeade">精选好课</p>
          <van-grid :border="false" :column-num="2">
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
              <p class="headeline">哈哈哈哈哈哈哈哈</p>
              <p class="evaluate">
                <van-rate
                  v-model="value"
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                />
                <span>{{ value }}</span>
                <span>7711学过</span>
              </p>
              <p class="price">￥99.00</p>
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              <p class="headeline">哈哈哈哈哈哈哈哈</p>
              <p class="evaluate">
                <van-rate
                  v-model="value"
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                />
                <span>{{ value }}</span>
                <span>7711学过</span>
              </p>
              <p class="price">￥99.00</p>
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
              <p class="headeline">哈哈哈哈哈哈哈哈</p>
              <p class="evaluate">
                <van-rate
                  v-model="value"
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                />
                <span>{{ value }}</span>
                <span>7711学过</span>
              </p>
              <p class="price">￥99.00</p>
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
              <p class="headeline">哈哈哈哈哈哈哈哈</p>
              <p class="evaluate">
                <van-rate
                  v-model="value"
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                />
                <span>{{ value }}</span>
                <span>7711学过</span>
              </p>
              <p class="price">￥99.00</p>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="series courses">
          <p class="BigHeade">系列课程</p>
          <div class="hseries">
            <img src="../../assets/image/lc.jpg" alt="" />
            <img src="../../assets/image/lc.jpg" alt="" />
            <img src="../../assets/image/lc.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="Praise">
        <van-tabs type="card" title-inactive-color="#666" color="#666">
          <van-tab title="畅销">
            <div class="shop">
              <div class="ximg">
                <img src="../../assets/image/lc.jpg" alt="" />
              </div>
              <div class="message">
                <p class="headeline">哈哈哈哈哈哈哈哈</p>
                <p class="evaluate">
                  <van-rate
                    v-model="value"
                    allow-half
                    void-icon="star"
                    void-color="#eee"
                  />
                  <span>{{ value }}</span>
                  <span>7711学过</span>
                </p>
                <p class="price">￥99.00</p>
              </div>
            </div>
            <div class="shop">
              <div class="ximg">
                <img src="../../assets/image/lc.jpg" alt="" />
              </div>
              <div class="message">
                <p class="headeline">哈哈哈哈哈哈哈哈</p>
                <p class="evaluate">
                  <van-rate
                    v-model="value"
                    allow-half
                    void-icon="star"
                    void-color="#eee"
                  />
                  <span>{{ value }}</span>
                  <span>7711学过</span>
                </p>
                <p class="price">￥99.00</p>
              </div>
            </div>
            <div class="shop">
              <div class="ximg">
                <img src="../../assets/image/lc.jpg" alt="" />
              </div>
              <div class="message">
                <p class="headeline">哈哈哈哈哈哈哈哈</p>
                <p class="evaluate">
                  <van-rate
                    v-model="value"
                    allow-half
                    void-icon="star"
                    void-color="#eee"
                  />
                  <span>{{ value }}</span>
                  <span>7711学过</span>
                </p>
                <p class="price">￥99.00</p>
              </div>
            </div>
            <div class="shop">
              <div class="ximg">
                <img src="../../assets/image/lc.jpg" alt="" />
              </div>
              <div class="message">
                <p class="headeline">哈哈哈哈哈哈哈哈</p>
                <p class="evaluate">
                  <van-rate
                    v-model="value"
                    allow-half
                    void-icon="star"
                    void-color="#eee"
                  />
                  <span>{{ value }}</span>
                  <span>7711学过</span>
                </p>
                <p class="price">￥99.00</p>
              </div>
            </div>
          </van-tab>
          <van-tab title="好评">好评</van-tab>
          <van-tab title="最新">最新</van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 3,
    };
  },
  methods: {
    search() {
      this.$router.push({ name: "search" });
    },
    ftop() {
      this.$router.go(-1);
    },
  },
  created() {
    this.$store.commit("tabHide");
  },
};
</script>

<style lang="scss">
.ppt {
  background-color: #f2f4f8;
  display: flex;
  flex-direction: column;
  .van-nav-bar .van-icon {
    color: #666;
  }
  > .main {
    overflow: auto;
    flex: 1;
    .evaluate {
      font-size: 11px;
      i {
        font-size: 12px;
        color: green;
      }
      span {
        line-height: 12px;
        &:nth-of-type(1) {
          margin-left: 10px;
        }
        &:nth-of-type(2) {
          float: right;
          text-align: right;
        }
      }
    }
    .swipe {
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
      }
      .van-swipe__indicators {
        left: auto;
        right: 0;
      }
    }
    p {
      width: 100%;
    }
    .course {
      .courses {
        background-color: #fff;
        overflow: hidden;
        .BigHeade {
          margin: 10px;
          font-size: 16px;
        }

        .price {
          color: red;
        }
      }
      .free {
        margin-top: 10px;
      }
      .series {
        .hseries {
          overflow: auto;
          display: flex;
          > img {
            width: 250px;
            height: 150px;
            margin: 0 5px;
          }
        }
      }
    }
    .Praise {
      background-color: #fff;
      margin-top: 10px;
      overflow: hidden;
      .van-tabs__wrap {
        margin: 10px 0;
      }
      .shop {
        display: flex;
        .ximg {
          width: 150px;
        }
        .message {
          position: relative;
          p {
            margin-left: 10px;
            line-height: 20px;
            span {
              line-height: 20px;
            }
          }
          .price {
            position: absolute;
            bottom: 10px;
            color: red;
          }
        }
      }
    }
  }
}
</style>